<script>
export default {
  methods: {
    doThisInCapturingMode() {
      this.color = "blue";
      console.log(this.$refs);
    },
    doThisOnce() {},
    doThisOnceInCapturingMode() {},
  },
  data: function() {
    return {
      name: "component data title",
      message: "hello world",
      color: "red",
    };
  },
  props: {
    text: "123sa",
  },
  render: function(createElement) {
    //切记, 插槽如上面的写法: v-slot:title="datas" => #title="datas" => slot='title' scope-slot="datas"
    // 酱紫是无法使用this.$slots获取的!!! 而是使用this.$scopeSlots => slot-scope
    return createElement(
      "div",
      {
        attrs: {
          id: "text",
        },
        ref: "myRef",
        style: {
          color: this.color,
        },
        slot: "name-of-slot",
        props: {
          myProp: "bar",
          text: {
            type: Number,
            required: true,
          },
        },
        key: "myKey", // 循环的key
        on: {
          "!click": this.doThisInCapturingMode,
          "~keyup": this.doThisOnce,
          "~!mouseover": this.doThisOnceInCapturingMode,
        },
      },
      // h(tag,{},[]||string) //如果是字符串只能展示一种 数组可以循环展示多个子节点
      [
        this.text,
        createElement("h1", this.$slots.default),
        createElement(
          "strong",
          this.$scopedSlots.default({
            text: "默认",
          })
        ),
        createElement("h2", "hello"),
        //把title插槽内容放在h1标签中,并向title插槽传递一个参数name
        createElement(
          "h1",
          this.$scopedSlots.header({
            // 需要传数据 具名插槽
            text: this.message,
          })
        ),
        //把content插槽植入新创建的p之中
        createElement("p", this.$slots.content), // 不需要传数据用这个把父组件内容拿过来
      ]
    );
  },

  // render(h, ctx) {
  //   // 普通函数 self = this 记得 箭头函数不需要
  //   let self = this;
  //   return h(
  //     "div",
  //     {
  //       attrs: {
  //         id: "",
  //       },
  //       style: {},
  //       props: {
  //         myProp: "bar",
  //         text: {
  //           type: Number,
  //           required: true,
  //         },
  //       },
  //       // domProps: {
  //       //   innerHTML: "baz",
  //       // },
  //       nativeOn: {
  //         click: this.nativeClickHandler,
  //       },
  //       directives: [
  //         {
  //           name: "my-custom-directive",
  //           value: "2",
  //           expression: "1 + 1",
  //           arg: "foo",
  //           modifiers: {
  //             bar: true,
  //           },
  //         },
  //       ],
  //       class: {},
  //       on: {
  //         "!click": this.doThisInCapturingMode,
  //         "~keyup": this.doThisOnce,
  //         "~!mouseover": this.doThisOnceInCapturingMode,
  //       },
  //       // scopedSlots: {
  //       //   default: () => {
  //       //     return {
  //       //       text: this.message,
  //       //     };
  //       //   },
  //       // },
  //       slot: "name-of-slot", // 如果组件是其它组件的子组件，需为插槽指定名称
  //       // 其它特殊顶层 property
  //       key: "myKey",
  //       ref: "myRef", // 如果你在渲染函数中给多个元素都应用了相同的 ref 名
  //     },

  //     123,
  //     h("div", this.$scopedSlots.default, 12),
  //     h(
  //       "div",
  //       this.$scopedSlots.header({
  //         text: this.message,
  //       })
  //     )
  //     // h("h2", [
  //     //   this.$scopedSlots.header({
  //     //     text: this.message,
  //     //   }),
  //     // ])
  //   );
  // },
};
</script>

<style></style>
